import {useEffect,useState}  from 'react';
import { Card, Button, Form, Input, Table,Tooltip} from 'antd';
import { SearchOutlined,EditOutlined,DeleteOutlined } from '@ant-design/icons';
import'./index.less'
import type { ColumnsType } from 'antd/lib/table';
import {reqGetHospitalSetList} from '@api/hospital/hospitalSet';
import {HospitalSetList,HospitalSetItem,SearchParams} from '@api/hospital/model/hospitalSetTypes';
import {useNavigate} from 'react-router-dom';
// interface DataType {
//   id: string;
//   name: string;
//   money: string;
//   address: string;
// }



const columns: ColumnsType<HospitalSetItem> = [
  {
    title: '序号',
    dataIndex: 'name',
    width:70,
    align:'center',
    // render: (text: string) => <a>{text}</a>,
    render:(row,record,index) => index + 1
  },
  {
    title: '医院名称',
    // className: 'column-money',
    dataIndex: 'hosname',
    // align: 'right',
  },
  {
    title: '医院编号',
    dataIndex: 'hoscode',
  },
  {
    title: 'api基础路径',
    dataIndex: 'apiUrl',
  },
  {
    title: '签名',
    dataIndex: 'signKey',
  },
  {
    title: '联系人姓名',
    dataIndex: 'contactsName',
  },
  {
    title: '联系人手机',
    dataIndex: 'contactsPhone',
  },
  {
    title: '操作',
    dataIndex: 'address',
    fixed: 'right',
    width:110,
    render:()=> {
      return (
      <>
       <Tooltip placement="top" title='修改医院'>
      <Button type='primary' icon={<EditOutlined/>}></Button>
      </Tooltip>
      <Tooltip placement="top" title='删除医院'>
      <Button type='primary' danger icon ={<DeleteOutlined/>} className='ml'></Button>
      </Tooltip>
      </>
      )
    }
  },
];
// const data = [
//   {
//     id: '1',
//     name: 'John Brown',
//     money: '￥300,000.00',
//     address: 'New York No. 1 Lake Park',
//   },
//   {
//     id: '2',
//     name: 'Jim Green',
//     money: '￥1,256,000.00',
//     address: 'London No. 1 Lake Park',
//   },
//   {
//     id: '3',
//     name: 'Joe Black',
//     money: '￥120,000.00',
//     address: 'Sidney No. 1 Lake Park',
//   },
// ];


export default function HospitalSet(){
  // 医院设置列表数据
  // 基本类型无所谓，引用类型（数组、对象）必须定义类型，否则将来使用会报错
  const[hospitalSetList,setHospitalSetList] = useState<HospitalSetList>([]);
  // loading
  const[loading,setLoading] = useState(false);
  // 当前页码
  const[current,setCurrent] = useState(1);
  // 每页条数
  const[pageSize,setPageSize] = useState(5);
  // 总数
  const[total,setTotal] = useState(0);

  const[lastHosname,setLastHosname] = useState('');
  const[lastHoscode,setLastHoscode] = useState('');
   
  const GetHospitalSetList = async (current:number,pageSize:number,hosname?:string,hoscode?:string)=>{
    // 发请求之前-loading
  setLoading(true);
  const res= await  reqGetHospitalSetList({
      page:current,
      limit:pageSize,

      // hosname,
      // hoscode,
      hoscode:hoscode == '' || hoscode ? hoscode:lastHoscode,
      hosname:hosname == '' || hosname ? hosname:lastHosname, 
    });
    // 更新当前页码
    setCurrent(current);
    // // 更新每页条数
    setPageSize(pageSize);
    // 更新数据
    setHospitalSetList(res.records);
    // 更新总数
    setTotal(res.total);
    //请求完成-loading
    setLoading(false);

  };
 
  useEffect(()=>{
    GetHospitalSetList(current,pageSize);
  },[]);

// 提交表单事件的回调函数
// 注意：只有提交按钮才能触发
const onFinish = (values:SearchParams)=>{
  const {hosname = '',hoscode = ''} = values;
  setLastHosname(hosname as string);
  setLastHoscode(hoscode as string);
  // 发送请求
  GetHospitalSetList(1,5,hosname,hoscode);
  
};
const navigate = useNavigate();
// 跳转到添加医院
const goAddHospital = ()=>{
  //编程式导航
  navigate('/syt/hospital/hospitalSet/add');
}

    return(
    <Card>
      <Form layout='inline' onFinish={onFinish}>
        <Form.Item name='hosname'>
          <Input placeholder="医院名称r" />
        </Form.Item>
        <Form.Item  name='hoscode'>
          <Input placeholder="医院编号" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" icon={<SearchOutlined />} htmlType="submit">查询</Button>
          <Button className='ml'>清空</Button>
        </Form.Item>
      </Form>
        <Button type="primary" onClick={goAddHospital}>添加</Button>
        <Button type="primary" danger className='ml mt' disabled>批量删除</Button>
      {/* // columns 列 */}
      {/* // dataSource 行
      // bordered  带边框 */}
          <Table  
                columns={columns} 
                dataSource={hospitalSetList} 
                bordered 
                rowKey = "id" 
                scroll={{ x: 1300 }} 
                pagination={{ 
                              current,
                              pageSize,
                              total,
                              pageSizeOptions:[5,10,15,20],
                              showSizeChanger:true, 
                              showQuickJumper:true,
                              showTotal:(total) => `总共:${total}`,
                              // 点击页码触发事件
                              // onChange:(page,pageSize)=>{
                              //   //发送请求,更新数据
                              //   GetHospitalSetList(page,pageSize,lastHosname,lastHoscode);
                              // }
                              onChange:GetHospitalSetList,
                              }}
                              loading={loading}
          />
    </Card>
    )
}